<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }

        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: #F3DCAB;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <label for="id">
                            编号：
                        </label>
                        <input type="text" id="id" v-model="id" :disabled="isEdit" v-focus>
                        <label for="name">
                            名称：
                        </label>
                        <input type="text" id="name" v-model="name">
                        <button @click="submit" :disabled="submitFlag">提交</button>
                    </div>
                </div>
            </div>
            <div>图书总数:{{total}}</div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in books" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                        <td>
                            <a href="#" @click.prevent="toEdit(item.id)">修改</a>
                            <span>|</span>
                            <a href="" @click.prevent="deleteBook(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script src="js/time.js"></script>
    <script src="js/axios.js"></script>

    <script type="text/javascript">
        //全局配置
        axios.defaults.baseURL = 'http://localhost:3000/'
        //拦截响应
        axios.interceptors.response.use(function (res) {
            return res.data
        }, function (error) {
            console.log(error);
        })
        //过滤器
        Vue.filter('format', function (value, arg) {
            return dateFormat(value, arg)
        })
        //自定义指令
        Vue.directive('focus', {
            inserted(el) {
                el.focus()
            }
        })

        let vm = new Vue({
            el: '#app',
            data: {
                books: [],
                id: '',
                name: '',
                isEdit: false,
                submitFlag: false
            },
            methods: {
                async submit() {
                    if (this.isEdit) {
                        //提交编辑到服务器
                        var ret = await axios.put('books/' + this.id, {
                            name: this.name
                        })
                        //console.log(ret)
                        //刷新页面
                        if (ret.status === 200) {
                            this.queryData()
                        }
                        //编辑结束,放开标志位,代表可以新增
                        this.isEdit = false
                    } else {

                        //发送请求到服务器,新增一本书
                        let ret = await axios.post('books', {
                            name: this.name
                        })

                        //返回的status 为200代表添加成功
                        if (ret.status === 200) {
                            //重新获取服务器最新数据,刷新页面
                            this.queryData()
                        }
                    }
                    //提交了数据就,需要把输入框中的数据清空
                    this.id = ''
                    this.name = ''

                },
                async toEdit(id) {
                    //修改标志位为编辑状态,则id输入禁止输入
                    this.isEdit = true
                    //发送请求,获取书籍信息
                    let obj = await axios.get('books/' + id)
                    // console.log(obj);
                    //将返回的书籍信息,显示到输入框中
                    this.id = obj.id
                    this.name = obj.name

                },
                async deleteBook(id) {
                    //发送请求到服务器进行删除
                    let ret = await axios.delete('books/' + id)
                    if (ret.status === 200) {
                        this.queryData()
                    }
                },
                async queryData() {
                    this.books = await axios.get('books')
                }
            },
            computed: {
                //通过计算,得到数组的长度
                total: function () {
                    return this.books.length
                }
            },
            //侦听器:如果图书的名字已经存在,则不允许提交
            watch: {
                async name(val) {
                    //发送请求,校验该书是否存在
                    // console.log(val);
                    if (val.trim().length !== 0) {
                        let ret = await axios.get('books/book/' + val)
                        // console.log(ret);  
                        this.submitFlag = ret.status === 1
                    } else {
                        this.submitFlag = true
                    }

                },
            },
            //元素已挂载,可用做数据更新到页面的操作
            mounted() {
                this.queryData()
                this.submitFlag = true
            },
        })

    </script>
</body>

</html>